import React, { useState, useContext, useEffect, useRef, createElement } from 'react'
import { SearchForm, Table as MyTable, GroupBtn } from '@modules'
import { Input, Select, Form, DatePicker, Table } from 'antd'
import utils from '@utils'
import CreateModal from '@utils/create'
import OrderShipModal from './orderShip'
import OrderRemark from './orderRemark'
import moment from 'moment'
const { RangePicker } = DatePicker;
const initialValues = {
  orderCode:'',
  orderDtStart:'',
  orderDtEnd:'',
  orderDt:[],
  expressCode:'',
  goodsId:'',
  sharerPhone:'',
  orderStatus: '',
  phone:'',
}

export default props => {
  const formEl = new useRef()
  const [orderShipVisible, setOrderShipVisible] = useState(null)
  const [params, setParams] = useState(initialValues)
  const columns = [
    {
      title: '', key: '', width: 40,
      render: (text, red, index) => {
        return <div>{(index + 1)}</div>
      }
    },
    {
      title: '订单号', key: 'orderCode', width: 240,
    },
    {
      title: '商品信息', key: 'goods', width: 240,
      render: (text, red, index) => {
        return <div>
          {
            text && text.length > 0 ? text.map((proItem, proIndex) => {
              return <>
                <div key={proIndex}>{proItem.goodsName} x{proItem.quantity}</div>
                <div>{proItem.skuValue}</div>
              </>
            }) : null
          }
        </div>
      }
    },
    {
      title: '下单人信息', key: 'buyerPhone', width: 150,
      render: (text, red, index) => {
        return <div>
          <div>手机号:{red.buyerPhone}</div>
          <div>昵称:{red.buyerName}</div>
        </div>
      }
    },

    {
      title: 'ERP', key: 'isImportErp', width: 100,
      render:s=>s==1?'已导单':'未导单'
    },
    {
      title: '分享人信息', key: 'sharerPhone', width: 150,
      render: (text, red, index) => {
        return <div>
          {red.sharerPhone&&<div>手机号:{red.sharerPhone}</div>}
          {red.sharerName&&<div>昵称:{red.sharerName}</div>}
        </div>
      }
    },
    {
      title: '收件人信息', key: 'contact', width: 330,
      render: (text, red, index) => {
        return <>
          <div>姓名:{red.contact}</div>
          <div>手机号:{red.phone}</div>
          <div>地址:{red.province + red.city + red.area + red.town + red.address}</div>
        </>
      }
    },
    {
      title: '订单状态', key: 'statusText', width: 80
    },
    // {
    //   title: '订单总计', key: 'totalMoney', width: 80,
    // },
    {
      title: '下单时间', key: 'createDt', width: 180,
    },
    {
      title: '物流信息', key: 'contact', width: 200,
      render: (text, red, index) => {
        return <div>
          <div>{red.expressName}</div>
          <div>{red.expressCode}</div>
        </div>
      }
    },
    {
      title: '发货时间', key: 'shipDt', width: 180,
    },
    {
      title: '操作', key: 'id', width: 200,fixed:'right',
      render: (text, rec, index) => {
        let btns = [
          {
            text: '查看详情',
            onClick: () => {
              props.history.push(`/order/detail?orderId=${rec.id}&buyerId=${rec.buyerId}`)
            }
          },
          {
	  				text:'二次售后',
            isHide:!rec.showResetRefund,
						permission:'/order/resetRefund',
	  				onClick:()=>{
	  					onResetRefund(rec)
	  				}
	  			},
          {
	  				text:'创建赔付单',
            isHide:rec.orderStatus != 8 && rec.orderStatus != 32,
						permission:"/order/compensate/create",
	  				onClick:()=>{
              props.history.push(`/order/compensate/create?orderId=${rec.id}&buyerId=${rec.buyerId}`)
	  				}
	  			}
          // {
          //   text: '同步尘锋',isHide:rec.dustessOrderId!==''||([2,4,8,32].indexOf(rec.orderStatus)==-1),
          //   onClick:()=>handleSyncOrder(rec)
          // },
        ]
        return <GroupBtn btns={btns} />
      }
    }
  ]
  const onResetRefund=(rec)=>{
		utils.confirm({
	    content: `是否确认打开订单的二次售后？`,
	    onOk:()=>{
        utils.post('/api/order/resetRefund',{
          orderCode:rec.orderCode
        }).then(res=>{
          onSearch()
        })
	    }
		})
	}
  const onRrefeshList = (res) => {
    setParams(res)
  }
  const buildParams = (res) => {
    let { orderDt, ...data } = res
    data.orderDtStart= orderDt[0]?moment(orderDt[0]).format('YYYY-MM-DD 00:00:00') :''
    data.orderDtEnd=orderDt[1]?moment(orderDt[1]).format('YYYY-MM-DD 23:59:59') :''
    return data
  }
  // 查询列表
  const onSearch = (params = {}) => {
    formEl.current.onSubmit().then(res => {
      let data = buildParams(res)
      setParams({ ...data })
    })
  }
  // 清空查询参数
  const onReset = () => {
    formEl.current.onReset().then(_ => {
      onRrefeshList({
        ...initialValues
      })
    })
  }

  // 导出订单
  const onExportOrder = () => {
    formEl.current.onSubmit().then(res => {
      let data = buildParams(res)
      utils.download('/api/export/orderOfShip', data, '订单列表', 'xls')
    })
  }

  return <div>
    <SearchForm ref={formEl}
      initialValues={initialValues}
      groupBtns={
        [
          { text: '查询', icon: 'SearchOutlined', onClick: onSearch },
          { text: '清空', icon: 'RedoOutlined', onClick: onReset },
          { text: '导出订单', onClick: onExportOrder },
          {
            text: '订单发货', onClick: () => {
              CreateModal.show(OrderShipModal,{
                onOk:onSearch
              })
            }
          },
          {
            text: '待发货订单备注', onClick: () => {
              CreateModal.show(OrderRemark,{
                onOk:onSearch
              })
            }
          },
          OrderRemark
        ]
      }>
      <Form.Item name="orderStatus" label="订单状态">
        <Select>
          <Select.Option value=''>全部</Select.Option>
          <Select.Option value='1'>待支付</Select.Option>
          <Select.Option value='2'>待发货</Select.Option>
          <Select.Option value='4'>已发货</Select.Option>
          <Select.Option value='8'>已收货</Select.Option>
          <Select.Option value='32'>交易完成</Select.Option>
          <Select.Option value='19'>交易关闭</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item name="orderDt" label="下单时间">
        <RangePicker />
      </Form.Item>
      <Form.Item name="orderCode" label="订单号">
        <Input placeholder='请输入订单号' />
      </Form.Item>
      <Form.Item name="expressCode" label="快递单号">
        <Input placeholder='请输入快递单号' />
      </Form.Item>
      <Form.Item name="phone" label="下单人手机号">
        <Input placeholder='请输入下单人手机号' />
      </Form.Item>
      <Form.Item name="sharerPhone" label="分享人手机号">
        <Input placeholder='请输入分享人手机号' />
      </Form.Item>
      <Form.Item name="goodsId" label="商品ID">
        <Input placeholder='请输入商品ID' />
      </Form.Item>
    </SearchForm>
    <MyTable
      rowKey={'orderCode'}
      url={'/api/order/page'}
      params={params}
      columns={columns}
    />
  </div>
}
